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Introduction 


Adobe Dreamweaver CS5.5 is the industry-leading web authoring and editing software that 
provides both visual and code-level capabilities for creating standards-based websites. For both 
beginners and experienced users, Dreamweaver offers the ease and flexibility to create a variety 
of websites. This handout provides an overview of the Dreamweaver CS5.5 user interface, and 
covers how to create accessible web pages using the Cal State L.A. web templates and how to 
repair common accessibility issues. This handout also includes numerous resources that web 
authors can use to learn about web accessibility. 


Downloading the Data Files 


This handout includes sample data files that can be used for hands-on practice. The data files are 
stored in a self-extracting archive. The archive must be downloaded and executed in order to 
extract the data files. 
e The data files used with this handout are available for download at 
http://www.calstatela.edu/its/training/datafiles/dreamweavercs55cc.exe. 
e Instructions on how to download and extract the data files are available at 
http://www.calstatela.edu/its/training/pdf/download.pdf. 


Terminology 


The table below includes a few web development terms and their definitions (see Table 1). 


Table 1 - Terminology 


Term Definition 

HTML HTML stands for Hypertext Markup Language. It is the language for 
describing the structure of web pages. 

CSS CSS stands for Cascading Style Sheets. It is the language for describing the 


presentation of web pages, including colors, layout and fonts. 


Site root The site root is the main or top-level folder of a website. Like a tree, all the 
files of the website branch out from the site root. The site root is the folder 
that contains all the files (HTML, CSS, images, scripts, etc.) that make up the 
website. 


Hyperlink A hyperlink (or link) is text or a graphic that users can click to go to another 
web page or to another section within the same page. 


URL Every web page has a unique address called a Uniform Resource Locator 
(URL) which identifies where it is located on the web. 


Unordered list An unordered list is an HTML element that defines a bulleted list. The list is 
contained within the unordered list tags, <ul> and </ul>. Each item in the list 
is contained within the list item tags, <li> and </li>. 

Ordered list An ordered list is an HTML element that defines a numbered list. The list is 
contained within the ordered list tags, <ol> and </ol>. Each item in the list is 
contained within the list item tags, <li> and </li>. 
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Getting Started with Dreamweaver CS5.5 


Dreamweaver is a WYSIWYG (What You See Is What You Get) web development tool that 
allows web authors to develop and modify web pages as well as see their changes instantly 
without requiring extensive knowledge of HTML code. 


Starting the Program 
The following steps are for starting Dreamweaver CS5.5 using the computers in the ITS Training 
Program computer labs. The steps for starting the program on other computers may vary. 


To start Dreamweaver CS5.5: 
1. Click the Start button, click All Programs, click Adobe Design Premium CS5.5, and 
then click Adobe Dreamweaver CS5.5. 


Exploring the User Interface 


When Dreamweaver CS5.5 is started for the first time, the Welcome Screen appears in the center 
of the workspace (see Figure 1). This screen provides quick access to the most recently opened 
files and shortcuts for creating new documents of the most commonly used file types. 
Additionally, this screen offers access to useful support documentation and video tutorials. 


Open a Recent Item Create New Top Features (videos) 
"T? CalStateFuturist..template 2c a.php P) HTML CS5.5 Feature Overview 
"55 menus/verticalMenu.inc = ColdFusion n 
E = ilg! CSS Inspect Mode 
“| templates/horizontalMenu.inc "| PHP H 
“E templates/template 2c a.php E ASP VBScript IEA CSS Enable/Disable 
^ ^ U 
"55 TestSite/untitled.html "^ XSLT (Entire page) 
EE = Dynamically Related Files 
Open... S| css 
=- " " ^ : ^ x| 
ez JavaScript Live View Navigation 
T B Lab Integrati 
P. rowserLab integration 
gg Dreamweaver Site... | H 
(C3 More... 3 More... 
|] Getting Started » Adobe® BrowserLab 
B New Features » BrowserLab provides an easier, faster 
B Resources » solution for cross-browser testing. 
is Dreamweaver Exchange » 
|_| Don't show again 


Figure 1 - Dreamweaver CS5.5 Welcome Screen 
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The main Dreamweaver window is called the workspace. It contains all the toolbars and panel 
groups used to manipulate the website's content. Users can customize the placement of the 
toolbars and panels. See Figure 2 and Table 2 for a brief description of the various workspace 
elements. 
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Figure 2 - Dreamweaver CS5.5 User Interface (Classic Workspace) 


Table 2 - Elements of the Dreamweaver CS5.5 User Interface 


Element Description 


Application bar Contains menus and a number of additional icons for easily accessing 
commonly used features. 


Insert toolbar Contains buttons for inserting various types of objects (such as images, 
tables and media elements) into a document. 


Document toolbar Contains buttons that provide options for different views of the Document 
window (such as Design view and Code view), various viewing options, 
and some common operations (such as previewing in a browser). 


Browser Navigation | Becomes active in Live view and shows the address of the page that is 
toolbar open in the Document window. 


Document window | The main editing area that displays the current document. Each document 
opens in a separate tab. The Status bar at the bottom of the Document 
window displays the total file size and a tag hierarchy. 


Panel groups Sets of related panels grouped together into tabs. This includes the Files 
panel which lets users manage their files and folders. These panels can be 
moved, resized, docked and closed to suit the user's workflow. 


Properties panel Allows users to view and change a variety of properties for the selected 
object or text. Each object has different properties. 
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Workspaces 

Dreamweaver CS5.5 provides a variety of predefined workspaces geared towards different types 
of users. Each workspace arranges and displays panels to best suit individual user's needs. The 
default workspace layout is called Designer. The workspace layout familiar to users of earlier 
releases of Dreamweaver is called Classic. Users can create and save their own workspace to 
maximize their productivity. 


To change the current workspace: [massi » [D — ~ 
1. Click the Workspace Switcher App Developer 
menu on the Application bar, and App Developer Plus 
then click Classic (see Figure 3). v Classic 
This is the workspace used in this Coder 
h andout. Coder Plus 
Designer 
Designer Compact 
Dual Screen 
Reset 'Classic' 
New Workspace... 
Manage Workspaces... 


Figure 3 - Workspace Switcher Menu 


Panels 

Panels provide in-depth information about the various elements of a web page. In the Classic 
workspace, panels (with the exception of the Properties panel) appear on the right side of the 
Dreamweaver window. When panels are grouped into a single frame, they appear as tabs, much 
like web pages in a tabbed browser. The most useful panels are the Properties, Files and CSS 
Styles panels. 


NOTE: Pressing the F4 key hides all panels. Pressing the F4 key again will unhide all panels. 


Properties Panel 

The Properties panel (also known as the Property inspector) appears at the bottom of the 
workspace. It provides context-sensitive information for any element selected in the Document 
window. This allows users to easily modify the properties of elements such as text, tables and 
images. The options available in this panel vary depending on the selected item. The Properties 
panel has two different editing options: HTML for editing the selected content's HTML code (see 
Figure 4), or CSS for editing the CSS code associated with the selected content (see Figure 5). 


PROPERTIES 


[<> Hm] Format Cass column2 - BZ ES mte 2 
fh css ID None X Link GD Target 


Figure 4 - Properties Panel for HTML Editing 
enonmis [sss E] 


<> HIM. TargetedRue h2 v | Font Verdana, Geneva, sans-serif -Br[ssss o 
| B css | Edit Rule CSS Panel Size 14 - fem >] | 2333 4 
Page Properties... 
Figure 5 - Properties Panel for CSS Editing 
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Toolbars 

Dreamweaver offers web developers several useful toolbars. The two most useful toolbars are 
the Document and Insert toolbars; other available toolbars include the Standard, Style Rendering 
and Coding toolbars. Toolbars can be displayed or hidden from the Toolbars submenu of the 
View menu. The Insert toolbar can be displayed or hidden from the Window menu because 
Dreamweaver defines this toolbar as a panel. Because each pane on the Insert toolbar contains a 
series of buttons, it functions more like a toolbar than a panel. 


Insert Toolbar 

In the Classic workspace, the Insert toolbar appears below the Application bar. Several tabs, 
each containing a different set of buttons, appear along the top of the toolbar. One of the most 
useful tabs is the Common tab which contains tools for adding hyperlinks, anchors, divisions, 
tables, images and plug-ins (see Table 3). Other useful tabs include the Forms and Text tabs 
which allow users to edit and create forms or change text properties and add list elements. The 
Favorites tab allows users to create their own custom toolbar consisting of any of the buttons 
found on the Insert toolbar. 


Table 3 - Common Toolbar Buttons 


Name Description 


us Hyperlink Inserts a hyperlink. 


Email Link Inserts an e-mail link. 


[e] 
di NAH Ga ANGE Inserts a named anchor. Hyperlinks can link to named anchors. 


ae i Inserts a horizontal line. 
== Horizontal Rule 


Inserts a table. 


m 
m 


Table 


i Inserts a <div> tag. 
Insert Div Tag : 


[€] - Clicking the down arrow displays a menu of options such as inserting 
Images ; : 
an image or an image placeholder. 
n- Media Clicking the down arrow displays a menu of options for inserting 


media files such as SWF (Flash), ActiveX and applets. 


Document Toolbar 

The Document toolbar, located below the Insert toolbar, contains buttons that can be used to 
display a document in different views. It also allows users to easily change the document title 
and preview the page in a web browser (see Table 4). 


Table 4 - Document Toolbar Buttons 


Name Description 


Code | Code Displays only the Code view in the Document window. Code 
view is a hand-coding environment for writing and editing 
HTML, JavaScript, CSS, PHP and other kinds of code. 


| Split | Split Splits the Document window between the Code and Design 
views. 
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Name Description 


| Design | Design Displays only the Design view in the Document window. 
Design view is a design environment that displays a fully 
editable, visual representation of the document, similar to 
what users would see when viewing the page in a browser. 


Live View | | ive View Displays a non-editable, interactive, browser-based view of 
the document in the Document window. 


Allows users to enter a title for the document, to be displayed 
in a browser’s Title bar. 


Title: | Untitled Document Title 


Allows users to preview or debug the document in a browser. 


e. Preview/Debug in Browser 


To switch to Design view: 
1. With an HTML file open, click the Design button on the Document toolbar. 


To switch Split view to split vertically: 
1. With an HTML file open, click the Split button on the Document toolbar. 
2. Click the View menu, and then click Split Vertically. 


Saving Files 


When working on a website, it is good practice to save files frequently to prevent loss of content. 
To check if a file has unsaved changes, look for an asterisk next to the file name on the file tab 
above the Document toolbar. Whenever a user makes changes to a file, an asterisk appears next 
to the file name (see Figure 6). After the file is saved, the asterisk disappears (see Figure 7). 


index php* X indexphp X 


Figure 6 - File Name Before Saving Figure 7 - File Name After Saving 


To save a file: 
1. Click the File menu, and then click Save. 


NOTE: The Save All option allows users to save all open files that have been changed. The 
Ctrl+S keyboard shortcut saves the file currently open in the Document window. 


Creating a Site Definition 


Dreamweaver provides web authors with an easy way to manage an entire website called the Site 
Definition. With a Site Definition, users can effectively manage files, automatically track and 
update hyperlinks, and synchronize files with a web server. Dreamweaver CS5.5 no longer uses 
the Site Definition Wizard of CS4, opting for a more streamlined Site Setup dialog box instead. 


To create a site definition: 
1. Click the Site menu, and then click New Site. The Site Setup dialog box opens. 
2. Type CalStateFuturistsClub in the Site Name box (see Figure 8). 


NOTE: The name of the site can be anything; it is just a reference and will only appear in the 
Files panel and Manage Sites dialog box. It is recommended, but not mandatory, to give the site 
and the local root folder the same name to reduce confusion. Remember that spaces are not 
allowed in web addresses (URLs). Avoid using spaces in file names or folder names. Instead, use 
underscores or hyphens, or capitalize the first letter in each new word to increase readability. 
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3. Click the folder icon $ next to the Local Site Folder box. 
4. Inthe Choose Root Folder dialog box, click the Desktop button in the left pane. 


Click the Create New Folder button — to create a new folder, and then rename the 
folder to CalStateFuturistsClub. 

6. With the CalStateFuturistsClub folder selected, click the Open button, and then click 
the Select button. This folder is now the local root folder. 


Site Setup for CalStateFuturistsClub ———— - " I “ka 
Site 
Servers 


A Dreamweaver site is a collection of all of the files and assets you use in your 
website. A Dreamweaver site usually has two parts: a local folder on your 

Version Control computer where you store and work on files, and a remote folder on a server 
> Advanced Settings where you post the same files to the web. 


Here you'll select the local folder and a name for your Dreamweaver site. 


Site Name: | CalStateFuturistsClub | 


Local Site Folder: | C:Wsers\tstraining\Desktop\CalStateFuturistsClub}\ F3 


Figure 8 - Site Setup Dialog Box 


7. Next, click Advanced Settings in the left pane of the Site Setup dialog box (see Figure 
9). 
Click the folder icon & next to the Default Images folder box. 


In the Choose Image Folder dialog box, click the Create New Folder button p , and 
then rename the new folder to images. 

10. With the images folder selected, click the Open button, and then click the Select button. 

11. Make sure the Document option is selected next to Links relative to. 

12. Click the Save button. The Files panel displays the new local root folder for your current 
site (see Figure 10). 


Site Setup for CalStateFuturistsClub xm 
Site 
Savers Default Images folder: | C:\Users\tstraining\Desktop\CalStateFuturistsClub\images\ | 8 
Version Control Site-wide Media Query file: F3 
v Advanced Settings 
Local Info Links relative to: ©) Document © Site Root 
Cloaking 


Web URL: | http:// 


Enter the Web URL if you dont have a remote server defined. If 
you have a remote server defined, Dreamweaver uses the Web 
Contribute URL specified in the server settings. 


Design Notes 
File View Columns 


Templates 
Spry C Case-sensitive links checking 
[M Enable Cache 


The cache maintains file and asset information in the site. This 
speeds up the Assetpanel and link management features. 


Figure 9 - Site Setup Dialog Box: Advanced Settings 
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mes Lassers | sweets | m 


| CalsateFuturistsCl » | [Local view -| 


Resty alo 


e 


Figure 10 - Files Panel After Creating a Site Definition 


Exporting a Site Definition 


Dreamweaver allows users to export the site definition for portability. Exporting a website is the 
process of making a site definition (.ste) file. This file is a summary of the website; it does not 
contain any website files, images, etc. To continue working with a website from another 
computer, make copies of both the .ste and the website files. 


To export a site definition: 
1. Click the Site menu, and then click Manage Sites. 
2. In the Manage Sites dialog box, select the CalStateFuturistsClub site, and then click 
the Export button (see Figure 11). 


Manage Sites mn 


CalStateFuturistsClub 


Change site setup options 


Create an .ste file 
Open an .ste file 


Figure 11 - Manage Sites Dialog Box 


3. Inthe Export Site dialog box, navigate to the local root folder on the Desktop, and then 
click the Save button. The site information is saved in the CalStateFuturistsClub.ste file 
in the local root folder. 

4. Click the Done button to close the Manage Sites dialog box. 
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Importing a Site Definition 


Importing a site definition allows Dreamweaver to manage a user's website. This is useful for 
web authors using multiple computers to work on a website. Users can export the site definition, 
save it on a flash drive along with the entire local root folder, then import the site on another 
computer and continue working. Remember that the site definition does not contain any web 
page files; it only contains the settings Dreamweaver uses to define the website. 


NOTE: If the site to be imported carries the same name as a site already defined in Dreamweaver, the 
program will require that the site being imported be renamed. 


To import a site into Dreamweaver: 

1. Click the Site menu, and then click Manage Sites. 

2. In the Manage Sites dialog box, click the Import button. 

3. In the Import Site dialog box, navigate to the root folder, select the 
CalStateFuturistsClub.ste file, and then click the Open button. 

4. If prompted for the local root folder, navigate to and open the CalStateFuturistsClub 
folder, and then click the Select button. 

5. If prompted for the images folder, navigate to and open the images folder inside the root 
folder, and then click the Select button. 

6. Click the Done button to import the files into the Files panel and close the Manage Sites 
dialog box. 


NOTE: Do not try to import a site by double-clicking the .ste file. The website will not import correctly. 
Site definition files must be imported into Dreamweaver. 


Working with the CSULA Web Templates 


To create a consistent look and feel across all University web pages, Cal State L.A. provides web 
authors with a set of web templates. These templates are available in several styles allowing web 
authors to decide which one best suits their needs. This section of the handout covers these 
templates, their uses, and creating web pages. More information about the templates can be 
found at http://www.calstatela.edu/univ/templates/. 


The CSULA web templates are simple HTML files. Although advanced HTML knowledge is not 
needed to use Dreamweaver, it is recommended that users become familiar with the language. 
See the Getting Help section of this handout for more information about learning the basics of 
HTML. 


Importing the CSULA Web Templates 


The most up-to-date CSULA web templates can be found on the Web Templates website located 
at http://www.calstatela.edu/univ/templates/. The web templates can also be found in this 
handout's Data Files package as a single archive named WebTemplates.zip. For the purpose of 
this handout, we will be using the templates located in the Data Files package. Once you have 
located the WebTemplates.zip file, the template pages must be placed in the Dreamweaver site. 


To import the template files into a Dreamweaver site: 
1. Inthe Files panel, right-click the first folder named Site - CalStateFuturistClub, and 
then click New Folder. Rename this folder to templates. 
2. Navigate to the Data Files folder and double-click to open the WebTemplates.zip file. 
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3. Position the WinZip window over the Dreamweaver window, leaving the Files panel 
visible. 
4. In the WinZip window, drag to select all the template files (see Figure 12). 


SSS 
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avorites Wizard 
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HTML Document 
HTML Document 
HTML Document 
HTML Document 
HTML Document 
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HTML Document 
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HTML Document 
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WebTemplates\ 
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WebTemplates\ 
WebTemplates\ 
WebTemplates\ 
WebTemplates\ 
WebTemplates\ 
WebTemplates\ 


Selected 10 files, 114KB 


Total 10 files, 114KB 


Figure 12 - WinZip Window with Selected Template Files 


5. Drag the selected files from the WinZip window to the templates folder in the Files 
panel of the Dreamweaver window (see Figure 13). Make sure the mouse pointer is over 
the templates folder before releasing the mouse button. 


LEGGERE: B- O- Ae 
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11222002123 PM 
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122/2012 1248 PM 
102/20021226 PM 
122/2021223 PM 
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Figure 13 - Drag Selected Template Files to the Templates] Folder 
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NOTE: Users who accidentally move the files into the wrong folder can move them to the correct 
folder using the Files panel. 


Template Types 


There are two types of CSULA web templates: primary level and secondary level. The templates 
are available in one-column, two-column and three-column layouts. Each of these templates has 
an alternate version that contains a horizontal menu. All the templates contain a uniform banner 
and footer. These different variations make for a total of ten different files to choose from. 


Primary Templates vs. Secondary Templates 

The primary level templates should be used to create the home page of a website; the secondary 
level templates should be used to create the subsequent content pages. The most notable 
difference between the two template types is the placement of the image across the top of the 
page. On the primary level template, the image spans the entire width of the page (see Figure 
14); on the secondary level template, the vertical menu starts at the top of the page, reducing the 
size of the image (see Figure 15). Another difference between the two template types is that the 
page title is placed below the image on the primary level template and above the image on the 
secondary level template. When selecting a file to use, note that the primary level templates are 
named #-column-homepage and the secondary level templates are named #-column-layout. 


Nav Item 1 Nav Item 2 Nav item 3 Nav Item 4 Nav Item 5 Nav Item 6 


Primary Page - 3 Column 


Link Item 1 This is an example of large text. Duis mauris justo, 
tincidunt in, molestie sed, lacinia vel, dolor. Aenean ac 
tellus porttitor ligula hendrerit ornare. Vivamus gravida 
ornare augue. Proin porta, quam a vulputate blandit, 
massa lorem euismod eros, vel nonummy enim sapien 


eget nisi. Com sociis natoque penatibus et magnis dis e Ten 
Sub Link tem 3 parturient montes, nascetur ridiculus mus. In dapibus * Item 
commodo dolor. Aliquam facilisis turpis ac tortor. * Item 


This is an example of regular text. Duis mauris ju 
Link Item 4 molestie sed, lacinia vel, dolor. Aenean ac tellus p 


, tineidunt in, 

titor ligula hendrerit 
ornare. Vivamus gravida ornare augue. Proin porta, quam a vulputate 
blandit, massa lorem euismod eros, vel nonummy enim sapien eget nisi 


Com sociis natoque penatibus et magnis dis parturient montes, nascetur 


ridiculus mus. In dapibus commodo dolor. Aliquam facilisis turpis ac 


tortor. 


This is an example of small text. Duis mauris justo, tincidunt in, molestie sed, 
lacinia vel, dolor. Aenean ac tellus portbtor ligula hendrent orare. Vivamus 
gravida omare augue. Proin porta, quam a vulputate blandit, massa lorem 
euismod eros, vel nonummy erm sapien eget nsi. Com socas natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus 


Figure 14 - Primary Level Template with Three Columns 
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Nav Item 4 Nav Item 6 


Secondary Page - 3 Column 


Link Item 1 


Link Item 2 


Sub Link Item 1 


Sub Link Item 2 


Sub Link Item 3 
Link Item 3 
Link Item 4 
ems This is an example of large text. Duis mauris justo, 
Link Item 6 tincidunt in, molestie sed, lacinia vel, dolor. Aenean ac 
Link Item 7 tellus porttitor ligula hendrerit ornare. Vivamus gravida 
TIER ornare augue. Proin porta, quam a vulputate blandit, 


massa lorem euismod eros, vel nonummy enim sapien 
eget nisi. Com sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. In dapibus 
commodo dolor. Aliquam facilisis turpis ac tortor. 

This is an example of regular text. Duis mauris justo, tinadunt in, 
molestie sed, lacinia vel, dolor. Aenean ac tellus porttitor ligula hendrent 
ornare. Vivamus gravida ornare augue. Proin porta, quam a vulputate 
blandit, massa lorem euismod eros, vel nonummy enim sapien eget nisi. 
Com sociis natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. In dapibus commodo dolor. Aliquam facilisis turpis ac 
tortor. 

This is an example of small text. Duis mauris justo, tincidunt in, molestie sed, 
lacinia vel, dolor. Aenean ac tellus porttitor ligula hendrerit ornare. Vivamus 
gravida ornare augue. Proin porta, quam a vulputate blandit, massa lorem 
euismod eros, vel nonummy enim sapien eget nisi. Com sociis natoque 


Figure 15 - Secondary Level Template with Three Columns 


One, Two or Three Columns 

The primary level template is available in two-column and three-column layouts; the secondary 
level template is available in one-column, two-column and three-column layouts. Each of these 
templates has an alternate version that contains a horizontal menu bar across the top of the page 
(see Figure 16). Remember to keep things consistent when creating a website. If you choose to 
use a template with a horizontal menu bar, then all the pages should contain the same horizontal 
menu with the same links in the same order. 


Nav Item 1 Nav Item 3 Nav Item $ Nav Item 6 


Secondary Page - 1 Column 


z 
= 
* 
à 
EA 
=a 


This is an example of large text. Duis mauris justo, tincidunt in, molestie sed, lacinia vel, dolor. 
Aenean ac tellus porttitor ligula hendrerit ornare. Vivamus gravida ornare augue. Proin porta, quam a 
vulputate blandit, massa lorem euismod eros, vel nonummy enim sapien eget nisi, Com sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus commodo dolor. 
Aliquam facilisis turpis ac tortor. 


This is an example of regular text. Duis mauris justo, tincidunt in, molestie sed, lacinia vel, dolor. Aenean ac tellus porttitor ligula 
hendrerit ornare. Vivamus gravida ornare augue. Proin porta, quam a vulputate blandit, massa lorem euismod eros, vel nonummy 
enim sapien eget nisi. Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus commodo 
dolor. Aliquam faciksis turpis ac tortor. 


This i$ an example of small text. Dus mauris justo, bnodunt in, moleste sed, lacra vel, dolor. Aenean ac tellus portbtor kgula hendrent 
omare. Vivamus gravida ornare augue. Proin porta, quam a vulputate blandit, massa lorem euismod eros, vel nonummy enim sapien eget nisi. 
Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus commodo dolor. Aliquam facilisis turpis ac 
tortor 


Figure 16 - Secondary Level Template with One Column 
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The one-column template is best used for creating pages with minimal navigation (see Figure 
16). The two-column template is a design that provides substantial space for navigation as well 
as a large content area to house a broad range of information (see Figure 17). The three-column 
template can be used best as a division or department home page. This template is set up to allow 
for substantial space for navigation as well as an additional content section to hold specific 
information, such as office hours (see Figure 14 and Figure 15). 


Nav Item 1 Nav Item 2 Nav Item 3 Nav Item 4 Nav Item 6 Nav Item 6 


Primary Page - 2 Column 


Link Item 1 This is an example of large text. Duis mauris justo, tincidunt in, molestie sed, 
Unk nem 2 lacinia vel, dolor. Aenean ac tellus porttitor ligula hendrerit ornare. Vivamus 
gravida ornare augue. Proin porta, quam a vulputate blandit, massa lorem 
euismod eros, vel nonummy enim sapien eget nisi. Com sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus 
commodo dolor. Aliquam facilisis turpis ac tortor. 


ular text. Duis mauris justo, tincidunt in, molestie sed, lacinia vel, dolor. 
ink Item 4 enean ac ligula hendrent ornare. Vivamus gravida ornare augue. Proin porta, quam a 
lorem euismod eros, vel nonummy enim sapien eget nisi. Com sociis 


natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus commodo 
nk Item 6 dolor. Aliquam facilisis turpis ac tortor. 


1s justo, tincidunt in, molestie sed, lacinia vel, dolor. Aenean a 


imus gravida omare augue. Pro am a vulputate blandit, 


massa lorem eusmod eros, ny enim sapien eget nisi. Com socës natoque penatibus et magnis dis 


parturient montes, nascetur ridiculus mus. In dapibus commodo dolor. Ahquam facilisss turpis ac tortor 


Figure 17 - Primary Level Template with Two Columns 


Customizing the CSULA Web Templates 

Once a suitable template is selected, it must be customized before adding the main content. The 
most important items to customize are the banner, menus and footer. Creating a personalized 
master template simplifies future web page creation. 


NOTE: When customizing a web template, you can undo any change by using the Undo command on the 
Edit menu or by pressing Ctrl+Z. 


To create a master template from a template file: 
1. In the Files panel, double-click the 2-column-homepage.html file. The file opens in the 
Document window. 
Click the File menu, and then click Save As. The Save As dialog box opens. 
Click the Site Root button to navigate to the root folder. 
4. Enter an appropriate file name (e.g., Master 2-column-homepage.html) in the File 
name box, and then click the Save button. 


Bs 


NOTE: A web address (URL) cannot contain spaces. Keep web page file names short using 
dashes or underscores instead of spaces when needed. 


E 


A dialog box opens asking to update the links. Click the No button. 
6. Close the original 2-column-homepage.html template file to avoid making unwanted 
changes. 
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Editing the Banner 

Because the web templates are intended to create a uniform look across all University web pages, 
the majority of the banner must be left as is. The Cal State L.A. logo in the upper-left corner 
must be left unchanged and it must link to http://www.calstatela.edu. The text to the right of the 
logo should be changed to the department or organization name for which the website is being 
created. The banner image can be replaced with an image of equivalent size (see Figure 18). The 
default banner image height in all the web templates is 260 pixels, but there are no constraints or 
requirements regarding the image height. The image width varies depending on the type of 
template being used (see Table 5 for a list of banner image width requirements). 


Nav Item 1 Nav Item 2 Nav Item 3 Nav Item 5 Nav Item 6 


Figure 18 - Banner Image 


Table 5 - Banner Image Width for Each Web Template 


Web Template Banner Image Width 
All primary templates (two-column and three-column) 950 pixels 
One-column secondary template (with or without horizontal menu) 930 pixels 
Two-column secondary template (with or without horizontal menu) 716 pixels 
Three-column secondary template (with or without horizontal menu) 520 pixels 


NOTE: The Data Files package of this handout contains sample banner images in various sizes. 


To change the organization name: 
1. With the template open in Design view, triple-click to select the Organization Name 
Here text. 
2. Type the department or organization name (e.g., CSULA Futurists Club). 
3. Click the File menu, and then click Save to save the changes. 


To change the banner image: 
1. Double-click the banner image. 
2. Inthe Select Image Source dialog box, locate and select the replacement image, and then 
click the OK button. The banner image is replaced and a copy of the image file is placed 
in the images folder within the site root. 


NOTE: The alt text of the image must be changed as well. This topic is discussed later in this 
handout. 
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To remove the banner image: 
1. Click the banner image. 
2. On the Status bar at the bottom of the Document window, click the <div> tag. 
3. Press the Delete key. 


Editing Menus 

The CSULA web templates have three different menus that can be customized: horizontal, 
vertical and lower. The menus are constructed with the unordered list («u1») HTML element. 
The following three sections cover how to edit each menu. 


NOTE: The horizontal menu is only included in the alternate templates. Web authors who are using 
templates that do not have a horizontal menu should skip the Horizontal Menu section and go to the 
Vertical Menu section of this handout. 


Horizontal Menu 

The horizontal menu bar is located below the organization name and above the banner image 
(see Figure 18). By default, the horizontal menu has 6 items, but it can be edited to have between 
5 to 10 items. In order to add or remove items from the horizontal menu, web authors need to 
edit the CSS class applied to the menu's unordered list, and then add or remove list items as 
needed. 


To edit the horizontal menu text: 
1. In Design view, drag to select the first menu item, Nav Item 1. 
2. Type Home. 
3. Click the File menu, and then click Save to save the changes. 


NOTE: If all of the text of a menu item is deleted, Dreamweaver will remove the link tag. To 
avoid this, use the selection method above to replace text instead of deleting it. 


To edit the horizontal menu links: 
1. In Design view, click the first menu item, Home. 
2. Inthe Properties panel, enter index.html in the Link box. 


NOTE: To link to a page in your site, enter the relative path or file name of the page in the Link 


box, or click the folder icon 3 to the right of the Link box to browse to and select the file. To 
link to a page outside of your site, enter an absolute path, including the protocol (such as http://), 


in the Link box (e.g., http://www.calstatela.edu). 


3. Click the File menu, and then click Save to save the changes. 


To change the number of menu items: 
1. In Design view, click the first menu item, Home. 


2. Click the Split button Pit on the Document toolbar. The Document window splits 
between the Code and Design views. 

3. Locate the code <ul class="menu_6"> and change the number 6 to 7. 

4. Place the cursor at the end of the line <li id="item5">...</1i>, and then press the 

Enter key to create a new line. 

Type the code «li id="item6"><a href="#">Nav Item 6«/a»«/li». 

Change the number for the last menu item from 6 to 7 so that it matches the format. 

7. Click the File menu, and then click Save to save the changes. 


gg 
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NOTE: Dreamweaver's Code Hints feature helps web authors insert and edit code quickly and without 
mistakes. As you type characters in Code view, a list of options beginning with those characters appears. 
Scroll through the list by using the Up Arrow and Down Arrow keys. To insert an item from the list, 
double-click it, or select it and press the Enter key. To close the list at any time, press the Esc key. 


It is important to note the format of the horizontal menu code. Each list item in the unordered list 
has an id attribute; this identifies the item in the list and helps to correctly position it relative to 
the items around it. Also, the last item in the list has class="last-item" applied to it. If the id 
and class attributes are not applied correctly, the menu will not render properly. See Figure 19 
and Figure 20 for examples of horizontal menus with different number of items. 


«div id-"main-nav-holder"- 
«div id-"main-nav"» 
«ul class-"menu 5"» 
«li id-"iteml"»«a href="#">Nav Item 1</a></li> 
«li id-"item2"»«a href="#">Nav Item 2«/a»«/li» 
«li id="item3"><a href="#">Nav Item 3</a></li> 
«li id="item4"><a href="#">Nav Item 4</a></li> 
«li id-"item5" class-"last-item"»«a href="#">Nav Item 5«/a»«/li» 
«/ul» 
«/div» 
</div> 


Figure 19 - Code for Horizontal Menu with 5 Items 


«div id-"main-nav-holder"» 
«div id-"main-nav"» 
«ul class-"menu 10"» 
«li id-"iteml"»«a href-"$"»Nav Item 1«/a»«/li» 
«li id-"item2"»«a href-"$"»Nav Item 2«/a»«/li» 
«li id-"item3"»«a href-"$"»Nav Item 3«/a»«/li» 


«li 
«li 
«li 
«li 
<li 
<li 
<li 
</ul> 
</div> 
</div> 


id="item4"><a 
id="item5"><a 
id="item6é"><a 
id-"item7"»«a 
id-"item$"»«a 
id-"item9"»«a 


id-"item10" class-"last-item"»«a href-"$"»Nav Item 10«/a»«/li» 


href-"$"»Nav 
hret="#">Nav 
hret="#">Nav 
hret="#">Nav 
hret="#">Nav 
hret="4">Nav 


Item 
Item 
Item 
Item 
Item 
Item 


4</a></li> 
5«/a»«/li» 
6</a></1li> 
7</a></li> 
8«/a»«/li» 
9</a></li> 


Figure 20 - Code for Horizontal Menu with 10 Items 


Vertical Menu 
The two-column and three-column templates are the only templates with the vertical navigation 
menu. This menu can have two levels, a top level menu and a submenu, created with nested lists. 


Nested lists are lists that contain other lists. 


To edit the vertical menu text: 


1. In Design view, triple-click to select the first menu item, Link Item 1. 


2. Type Welcome 


Futurists. 


3. Click the File menu, and then click Save to save the changes. 
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NOTE: If all of the text of a menu item is deleted, Dreamweaver will remove the link tag. To 
avoid this, use the selection method above to replace text instead of deleting it. 


To edit the vertical menu links: 


1. 
2. 


3. 


In Design view, click the first menu item, Welcome Futurists. 
In the Properties panel, enter welcome.html in the Link box. 


NOTE: To link to a page in your site, enter the relative path or file name of the page in the Link 
box, or click the folder icon 3 to the right of the Link box to browse to and select the file. To 
link to a page outside of your site, enter an absolute path, including the protocol (such as http://), 
in the Link box (e.g., http://www.calstatela.edu). 


Click the File menu, and then click Save to save the changes. 


To add a new item to the vertical menu: 


IP 
2. 


3: 
4. 


en 


In Design view, click to the right of Link Item 3, and then press the Enter key. 


On the Common tab of the Insert toolbar, click the Hyperlink button | The 
Hyperlink dialog box opens. 

In the Text box, type New Link. 

In the Link box, type the URL of the link. Or, click the folder icon © to the right of the 
Link box to browse to and select a file. 

Click the OK button. 

Click the File menu, and then click Save to save the changes. 


NOTE: The steps above can be used to add items to the main menu and submenus. 


To create a new submenu: 


LE 


2: 
Ji 


7. 
8. 


9 


In Design view, click to the right of New Link, and then press the Enter key. 


Click the Split button | Pt on the Document toolbar. 

In the Code pane, click the non-flashing cursor between the opening «1i» and closing 
</1i> tags. Make sure the cursor is between the angle brackets (see Figure 21). 

Type «ul»«li»«/li»«/ul» to add a new unordered list with one list item. 

Place the cursor between the opening <li> and closing </li> tags that were added in 
step 4 (see Figure 21). 


On the Common tab of the Insert toolbar, click the Hyperlink button SS. The 
Hyperlink dialog box opens. 

In the Text box, type New Sub Item. 

In the Link box, type the URL of the link. Or, click the folder icon © to the right of the 
Link box to browse to and select a file. 

Click the OK button. 


10. Click the File menu, and then click Save to save the changes. 


<li><a href-"$"»Link Item 3«/a»«/li» 


<li><a href-"$"»New Link</a></1li> <li><a href-"$"»New Link</a></1li> 
aijJii» <1i><ul><lik/1i></ul></1i> 
<li><a href-"$"»Link Item 4</a></1li> <li><a href-"$"»Link Item 4</a></1li> 


Before After 


Figure 21 - Vertical Menu Code Before and After Adding a New Submenu 
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Lower Menu 
There is a third menu that allows web authors to add any links that do not quite belong in the 
vertical or horizontal menus. This menu is located at the bottom of the page, above the footer. 


NOTE: Editing the menu text and links is the same process as specified for the horizontal and vertical 
menus. 


To edit a menu list heading: 
1. In Design view, triple-click to select the Option 3 heading. 
2. Type Edited Heading. 
3. Click the File menu, and then click Save to save the changes. 


To add a list below an existing heading: 
1. In Design view, click to the right of Edited Heading, and then press the Enter key. 


2. Onthe Text tab of the Insert toolbar, click the Unordered List button ui 


3. Onthe Common tab of the Insert toolbar, click the Hyperlink button S The 
Hyperlink dialog box opens. 

4. Inthe Text box, type New Link Item. 

5. In the Link box, type the URL of the link. Or, click the folder icon — to the right of the 
Link box to browse to and select a file. 

6. Click the OK button. 

7. Click the File menu, and then click Save to save the changes. 


To add an item to an existing list: 
1. In Design view, click to the right of New Link Item, and then press the Enter key. 


2. Onthe Common tab of the Insert toolbar, click the Hyperlink button S The 
Hyperlink dialog box opens. 

3. Inthe Text box, type 2nd Link Item. 

4. In the Link box, type the URL of the link. Or, click the folder icon 3 to the right of the 
Link box to browse to and select a file. 

5. Click the OK button. 

6. Click the File menu, and then click Save to save the changes. 


To remove the lower menu entirely: 
1. In Design view, scroll to the bottom of the page and click anywhere within the lower 
menu. 
2. On the Status bar at the bottom of the Document window, click the <div#lowerMenu> 
tag, and then press the Delete key. 
3. Click the File menu, and then click Save to save the changes. 


Editing the Footer 

The footer is the large black box located at the bottom of the page. The only change that web 
authors need to make to the footer is to update the e-mail address that provides a way for users to 
report problems with the page. 


To update the e-mail address: 
1. In Design view, scroll down to the footer and click anywhere within the Report a 
Problem With This Page text. 
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2. Inthe Properties panel, change the e-mail address in the Link box to the CSULA e-mail 
account that will be handling comments regarding the website. Make sure that mailto: 
comes before the e-mail address. 

3. Click the File menu, and then click Save to save the changes. 


Adding Metadata 

Metadata provides information about a web page. Most search engines use this data when adding 
pages to their search index. Meta elements are inserted into the HTML document, but are not 
directly visible to users visiting the page. 


To add metadata: 


1. Click the Split button . SP'* | on the Document toolbar. 

2. In the Code pane, scroll to the top and locate the opening «head? tag (see Figure 22). 

3. Locate the code «meta name-"description" content-"" /» and place the cursor 
anywhere within the tag (see Figure 22). 


1 <!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/ 
2 <html xmilns="http://www.w3.org/1999/xhtml"> 

3 <head> 

4 <meta http-equiv-"Content-Type" content-"text/html; charset-UTF-8" /> 

5 «meta name-"desdription" content-"" /» 

6 «meta name-"keywords" content-"" /» 

J <title>Page Title - California State University, Los Angeles</title> 

8 «link rel-"stylesheet" href-"http://www.calstatela.edu/css/styles.css" type-"text/css" /» 
9 «link rel-"shortcut icon" href-"http://www.calstatela.edu/favicon.ico" /» 

10 </head> 

11 «body» 


Figure 22 - Meta Tags in the Code Pane 


4. Inthe Properties panel, type a description for the page in the Description box (see 
Figure 23). The description can be as long as needed to accurately describe the page. 


PROPERTIES L 


E Description: ^ 


Figure 23 - Description Box in the Properties Panel 


5. In the Code pane, locate the code «meta name="keywords" content-"" /» and place 
the cursor anywhere within the tag. 

6. In the Properties panel, type keywords for the page in the Keywords box (see Figure 
24). Use commas to separate the keywords (e.g. CSULA, future, club). 


PROPERTIES | 
| = Keywords future, dub, csula, space, awesome ^ 


Figure 24 - Keywords Box in the Properties Panel 


7. Click the File menu, and then click Save to save the changes. 
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Creating Pages from the Master Template 


Web authors now have a customized master template that they can use to create their entire site. 
To create a new web page, simply open the master template file and save it as a new page with a 
new file name and title. 


To create the site's home page: 
1. Open the master template file (Master 2-column-homepage.html). 
2. Click the File menu, and then click Save As. The Save As dialog box opens. 
3. Navigate to the root folder, rename the file to index.html, and then click the Save button. 


NOTE: By convention, a website's home page is named index. Any subsequent web pages 
should have short names describing the page content. 


4. Onthe Document toolbar, replace the text in the Title box with Welcome to 
CalStateLA Futurists Club (see Figure 25 and Figure 26). 

5. Click the File menu, and then click Save to save the changes. 

6. Close the master template file to avoid making unwanted changes. 


i f 


fo, Title: Page Title - California State Ur ie, Title: | Welcome to CalStateLA Futuris 


Figure 25 - Title Box with Default Title Figure 26 - Title Box with Updated Title 


Adding Main Content 
Dreamweaver makes adding new content to the main section of a web page very simple. In many 
cases, web authors can simply click and begin typing just as they would use a word processor. 
All content must reside within the main content division, <div#content> (see Figure 27). 

A division is a block of content on an HTML page. When editing in Dreamweaver's Design 
view, divisions are signified by dashed outlines. To check which division the cursor is currently 
located in, review the tag hierarchy on the Status bar at the bottom of the Document window (see 
Figure 28). 


stess 
Code | Spit | Desxn uveCode p? (FS veven inet Be Ç), mace |e © Tie: Page Tide - Cabforras State ur 
= 


D Oy Address: 
iy 


Changed Item Nav Item 2 


Primary Page - 2 Column Main Content Division 


This is an example of large text. Duis mauris justo, tincidunt in, molestie sed, 
lacinia vel, dolor. Aenean ac tellus porttitor ligula hendrerit ornare. Vivamus 
gravida ornare augue. Proin porta, quam a vulputate blandit, massa lorem 
euismod eros, vel nonummy enim sapien eget nisi. Com sociis natoque A 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dapibus | 
commodo dolor. Aliquam facilisis turpis ac tortor. 1 


; This is an example of regular text. Duis mauris justo, tincidunt in, molestie sed, lacinia vel, dolor. 


«dv vracoer » «dreücontert» cdv cokan 7» ed» di» KAQ ow v 1015x654» 1X tec Unicode (UTF-&) 


Figure 27 - Highlighted Main Content Division 


<body> <div#wrapper > <div#content> «div.column 7» <p> 
Figure 28 - Tag Hierarchy on the Status Bar 


Creating Accessible Websites Using Dreamweaver CS5.5 and CSULA Web Templates 22 


Headings and Paragraphs 

The most common elements on a web page are headings and paragraphs. Headings are elements 
that mark the beginnings of sections of a web page. There are various levels of headings which 
are defined with the <h1>, <h2>, «h3», «h4», «h5», and <h6> tags; «h1» defines the most 
important heading, and <h6> defines the least important heading. As the heading number 
increases, the size of the text decreases. Paragraphs are blocks of text which are defined with the 
«p» tag. Browsers automatically add some space (margin) before and after each «p» tag. 


NOTE: The heading styles applied to the CSULA web templates add a gold horizontal line below each 
heading. 


To add a new heading: 
1. In Design view, place the cursor where you want to insert the heading. 
2. Type This is my Heading. 
3. Click anywhere within the heading text. 
4. Onthe Text tab of the Insert toolbar, click the button of the desired heading level (h1, 
h2, h3) (see Figure 29). 
5. Click the File menu, and then click Save to save the changes. 


Text Favorites|) HHH 
B Z| S em| 4 i" ræ|hl h2 h3| ul ol li | d! dt dd | aux wsc | J- 
Figure 29 - Text Tab of the Insert Toolbar 


To add a new paragraph after a heading: 
1. In Design view, click to the right of the heading, press the Enter key, and then type the 
paragraph text. 
2. To add a line break, press Shift+Enter. 
3. Click the File menu, and then click Save to save the changes. 


Styling and Emphasizing Text 

Much like a Word document, it is helpful to bold or italicize text on a web page to emphasize 
important information. The «strong» or «em» HTML tags can be used to make text stand out. 
Web authors can also use several CSS styles included with the CSULA web templates to adjust 
the size of text. 


NOTE: Avoid setting large blocks of text in italics because the readability of italicized text is much lower 
than plain text. 


To bold text: 
1. In Design view, select the text you want to format. 


2. On the Text tab of the Insert toolbar, click the Strong button © (see Figure 29). 
3. Click the File menu, and then click Save to save the changes. 


To italicize text: 
1. In Design view, select the text you want to format. 


2. On the Text tab of the Insert toolbar, click the Emphasis button *" (see Figure 29). 
3. Click the File menu, and then click Save to save the changes. 
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To increase the size of text: 


T. 


2. 
3. 


4. 


In Design view, place the cursor anywhere within the paragraph you want to format. 

In the Properties panel, make sure that the HTML button | ? H™L lis selected. 

In the Properties panel, click the Class arrow and select big from the list. Note that the 
paragraph tag on the Status bar now has the class big applied to it *P.bia», 

Click the File menu, and then click Save to save the changes. 


To decrease the size of text: 


1. 


2. 
3. 


4. 


In Design view, place the cursor anywhere within the paragraph you want to format. 

In the Properties panel, make sure that the HTML button |$? H™L lis selected. 

In the Properties panel, click the Class arrow and select smaller from the list. Note that 
the paragraph tag on the Status bar now has the class smaller applied to it *P.smaller, 
Click the File menu, and then click Save to save the changes. 


Hyperlinks 

A hyperlink (or link) is text or a graphic that users can click to go to another web page or to 
another section within the same page. Hyperlinks are found on nearly all web pages, allowing 
users to click their way from page to page. For longer web pages, it is useful to include a Back to 
Top link, a link that helps users jump to the top of the current page. 


NOTE: Text links are often blue and underlined. The CSS styles applied to the CSULA web templates 
display text links as blue text, without an underline; when users hover over the link, an underline appears 
below the text. 


To add a link: 


1. 
2. 


3. 


5. 
6. 


In Design view, select the text you want to link. 


On the Common tab of the Insert toolbar, click the Hyperlink button S The 
Hyperlink dialog box opens. 

In the Link box, do one of the following: 

e To link to a page in your site, enter the relative path or file name of the page in the 


Link box, or click the folder icon È! to the right of the Link box to browse to and 
select the file. 

e To link to a page outside of your site, enter an absolute path, including the protocol 
(such as http://), in the Link box (e.g., http://www.calstatela.edu). 

To have the link open in a new browser window, click the Target arrow and select 

. blank from the list. 

Click the OK button. 

Click the File menu, and then click Save to save the changes. 


To add a Back to Top link: 


1. 


In Design view, scroll to the bottom of the page and click to the right of the Submit 
button. 

Click the Split button |. Pt on the Document toolbar. 

In the Code pane, locate the closing </form> tag, place the cursor to the right of the tag, 
and then press the Enter key. 


On the Text tab of the Insert toolbar, click the Paragraph button aj. 
Type Back to Top. 
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6. Click the Design button Peon on the Document toolbar. 
7. Select the Back to Top text. 


On the Common tab of the Insert toolbar, click the Hyperlink button | The 
Hyperlink dialog box opens. 

9. Inthe Link box, type Zcontent. 

10. In the Title box, type back to top of page. 

11. Click the OK button. 

12. Click the File menu, and then click Save to save the changes. 


Working with Link Boxes 

Sometimes, it is important to highlight a particular set of links or a small paragraph of 
information. To achieve this, web authors can use link boxes to separate text from the other 
content. Link boxes can be used in any of the columns found within the main content division. 


Before utilizing link boxes, it is helpful to understand the HTML structure and CSS styles that 
define them. Link boxes are created using two divisions, a header, and an unordered list. The 
first division defines the total width of the link box. The second division signifies that this is, in 
fact, a link box and that the heading and list to follow should be styled as such (see Figure 30). 


e This is the list in the link box 
e Link 
e Link 


«div class-"cont col 2"» 
«div class-"linksbox"» 


<hi>This is the Heading</hi> 
<p>This is the paragraph text </p> 


«ul» 
<li><a href="#">This is the list in the link box</a></li> 
<li><a href="#">Link</a></1li> 


<li><a href="#">Link</a></1i> 


Figure 30 - Link Box Code Structure 
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Figure 30 shows a link box with a width that is half of the content column it resides in, signified 
by the first division «div classz"cont col 2"». The next division «div class="linksbox"> 
defines the styles for the following header, paragraph and list. This particular link box contains 
the required heading («h1») followed by a paragraph («p») and an unordered list («u1»). Note 
that after the heading, a link box can contain a paragraph, an unordered list, an ordered list, or 
any combination of the three. 


The width of the link box will change based on which template it resides in, but the options for 
the width are the same for all the templates. Web authors can choose to split the main content 
division into two or three columns. This is done by setting the class of the first division for the 
link box to either cont col 2 or cont col 3 (see Figure 31). 


No bullets on unordered list Lorem ipsum dolor sit amet, consectetuer 


adipiscing elit. Curabitur nibh. Vestibulum ante 


No bullets on unordered list ipsum primis in faucibus orci luctus et ultrices 


No bullets on unordered list posuere cubilia Curae. 


No bullets on unordered list 


h 
Li 
I 
i 
i 
Li 
1 
r 
i 
[i 
ii 
t 
L| 
1 
L| 
i 
i No bullets on unordered list 
1 
1 
[L| 
L| 
1 
1 
1 
i 
[L| 
[| 
|| 
1 
L| 
1 
1 
i 


—————————————— 


Figure 31 - Link Boxes 


To create a new link box: 
1. In Design view, place the cursor where you want to insert the link box. 


2. On the Common tab of the Insert toolbar, click the Insert Div Tag button =. 

3. Inthe Insert Div Tag dialog box, click the Class arrow and do one of the following: 
e Select cont col 2 for a link box that takes up half the width of the content column. 
e Select cont col 3 for a link box that takes up one third of the content column. 
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Click the OK button. 


On the Common tab of the Insert toolbar, click the Insert Div Tag button =. 


4 

5. 

6. Inthe Insert Div Tag dialog box, click the Class arrow and select linksbox from the list. 
7. Click the OK button. 

8. Type the text for the link box heading. 


9. On the Text tab of the Insert toolbar, click the h1 button hl, 


10. Press the Enter key. 
11. To add a paragraph of plain text, type the text. 


12. To add a list, click the Unordered L ist button ul on the Text tab of the Insert toolbar, 
and then type the list items. 
13. Click the File menu, and then click Save to save the changes. 


Options for Link Boxes and Lists 

There are a few ways to customize link boxes and lists on the web template pages. Link boxes 
can have various heading styles: a gray background, a dark gray background, or a large font size. 
Lists can be styled to display with or without bullets. 


To remove bullets from an unordered list: 
1. In Design view, click any item in the unordered list. 
2. On the Status bar, click the <ul> tag. 
3. Inthe Properties panel, click the Class arrow and select nobullets from the list. 
4. Click the File menu, and then click Save to save the changes. 


To remove the nobullets style from an unordered list: 
1. In Design view, click any item in the unordered list. 
2. On the Status bar, click the «u1.nobullets?» tag. 
3. Inthe Properties panel, click the Class arrow and select none from the list. 
4. Click the File menu, and then click Save to save the changes. 


To change a link box heading to a light gray header: 
1. In Design view, click anywhere within the link box header. 
2. On the Status bar, click the <h1> tag. 
3. Inthe Properties panel, click the Class arrow and select gray from the list. 
4. Click the File menu, and then click Save to save the changes. 


To change a link box heading to a dark gray header: 
1. In Design view, right-click anywhere within the link box header, point to CSS Styles, 
and then click darkgray. 
2. Click the File menu, and then click Save to save the changes. 


To increase the link box heading text size: 
1. In Design view, click anywhere within the link box header. 
2. On the Status bar, right-click the <h1> tag, point to Set Class, and then click large. 
3. Click the File menu, and then click Save to save the changes. 


Previewing Web Pages 


Previewing web pages is a very important part of web development. It is recommended that web 
authors preview their pages using a variety of web browsers (e.g., Internet Explorer, Firefox, 
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Chrome, Safari) to ensure a consistent look across different platforms. Dreamweaver allows web 
authors to preview a page without having to upload it to a web server. The Preview in Browser 
feature can be used to see how a page will look in specific browsers. Live view provides another 
way of seeing what a page will look like in a browser without having to leave the Dreamweaver 
workspace. 


To preview a page in Live view: 
1. Click the Design button | P*99^ | on the Document toolbar. 
2. Click the Live View button “ve View on the Document toolbar. 
3. Browse the page in Dreamweaver. To follow a link, hold down the Ctrl key and click 
the link. 


To preview a page in a web browser: 
1. Click the File menu, point to Preview in Browser, and then select one of the listed 
browsers. 


NOTE: Pressing F12 displays the current page in the primary browser. 


Accessibility and Section 508 Requirements 


Section 508 of the Rehabilitation Act of 1973 is a U.S. law requiring electronic technology used 
by government agencies to be accessible. The CSU has passed a mandate that all CSU systems 
must also adhere to these standards. This section of the handout covers several accessibility 
requirements and how to repair pages that do not meet accessibility standards. 


Note that this handout covers only a fraction of the requirements set by the Section 508 
standards. For more detailed information on Section 508 requirements and solutions, visit the 
CSULA web accessibility website (http://www.calstatela.edu/accessibility/508.php). The Getting 
Help section of this handout provides links to other training resources and how to get help on this 
topic. 


Screen Readers and Accessibility 


The web is a vast landscape of information most of which is represented visually. Navigating a 
computer or the web can be difficult for people who are visually impaired. Screen readers are 
programs that read aloud the on-screen information. They can “read” any words found on the 
screen, including window titles, button names or any other plain text source. However, screen 
readers cannot “read” pictures, charts, graphs or other visual representations of information. 
Adding alternate text descriptions for pictures and tables, and using hidden descriptions to label 
sections of a web page are two easy ways to help screen readers “read” a web page. 


Alt and Longdesc Attributes (Standard A) 


The first Section 508 standard is one of the easiest to follow. All images on an HTML page must 
include an alternate text description, also known as alt text. When a screen reader finds an image 
on a web page, it announces the text in the alt attribute of the image tag. The alt text should 
include a short description of the image. If the image is purely decorative and contains no 
important information, an empty alt attribute will suffice (e.g., alt=""). Images conveying 
important information should include appropriate alt text that explains the image's content. 
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To set the banner image's alt text: 
1. Click the banner image to select it. 
2. In the Properties panel, click the Alt arrow and select «empty». 


Users can leave an alt attribute empty, provided they select «empty» as outlined above. Not 
selecting «empty» removes the alt attribute, resulting in a less accessible website. Screen readers 
skip any image with an empty alt attribute. The banner image is a perfect example of when to use 
an empty alt attribute because it is only used for decoration. If the banner image is used to 
advertise an upcoming event, then the alt attribute should contain a short description of the event 
and information displayed within the banner. 


For more information about alt text, visit http://www.calstatela.edu/accessibility/p_img.php. 


Colors and Contrast (Standard C) 


Section 508 standard C requires a contrast ratio of 5:1 between background and foreground 
colors. Testing a web page's color contrast requires the use of a program such as the Color 
Contrast Analyzer. 
e Fora video tutorial on using the Color Contrast Analyzer, visit 
http://youtu.be/9rS6KTJ3bi4 (Web Page Color Contrast: Web Accessibility Manual 
Checks). 


Although the color schemes used in the web templates should meet the color contrast 
requirements, web authors should carefully choose the color combinations used on their pages. 


For more information about this standard, visit http://www.calstatela.edu/accessibility/p col.php. 


Tables (Standards G and H) 


Tables are a great way to visually organize information on a web page. However, tables can 
easily confuse screen readers or other assistive technology. The proper use of table heading «th» 
and table data «td» cell tags is a must. Use the scope attribute to properly associate a header cell 
with its associated data cells. 


To create a table in Dreamweaver: 
1. Place the cursor in the main content division where you want to insert the table. 


2. Click the Table button ES on the Insert toolbar. The Table dialog box opens (see 
Figure 32). 

3. Inthe Rows and Columns boxes, enter the number of rows and columns for the table. 

4. Change the value in the Table width box to 100 percent. 

5. In the Header section, select the option that matches the table layout you want to create 
(Left adds row headers, Top adds column headers, etc.). 

6. In the Summary box, add a short summary of the table contents. 


NOTE: Text entered in the Caption box appears on the page. Text entered in the Summary box 
will only be read by screen readers. 


7. Click the OK button to create the table. Dreamweaver automatically adds the scope 
attributes based on the selected Header option. 
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Rows: M Columns: 3 


Table width: 100 


Figure 32 - Table Dialog Box 


Web authors who want to change the layout of the header cells will have to manually edit the 
code to change the scope attributes accordingly. Another option is to create a new table with 
Dreamweaver’s Table button and transfer the content. 


For more information about the scope attribute and how to manually add it to tables, visit 
http://www.calstatela.edu/accessibility/p_tab.php. 


Dreamweaver CS5.5 Site Reports 


Dreamweaver’s site reports allow users to check for several types of errors, including broken 
links, missing alt text, and untitled web pages. After finding and fixing the errors, web authors 
should run site reports again to ensure that all errors have been fixed. 


NOTE: A site must be defined or imported before running a site report. Individual pages do not need to be 
opened before running a site report. 


To run a site report: 
1. Click the Window menu, point to Results, and then click Site Reports. The Site 
Reports tab of the Results panel displays (see Figure 33). 


File Line Description 


Figure 33 - Site Reports Tab of the Results Panel 


2. Click the Reports button © located in the upper-left corner of the Results panel. The 
Reports dialog box opens (see Figure 34). 
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3. Click the Report on box and select Entire Current Local Site from the list. 
4. Under HTML Reports, select the Missing Alt Text, Removable Empty Tags, and 
Untitled Documents check boxes. 


G Workflow 
[~ Checked Out By 
[. Design Notes 
[Recently Modified 


© HTML Reports 
[. Combinable Nested Font Tags 
[V Missing Alt Text 
[. Redundant Nested Tags 
[V Removable Empty Tags 
[v Untitled Documents 


Report Settings... 


Figure 34 - Reports Dialog Box 
5. Click the Run button. The errors are listed in the Results panel (see Figure 35). 
_SEARCH | REFERENCE | W3C VALIDATION | BROWSER COMPATIBILITY | LINK CHECKER | SITE REPORTS | FTP LOG | SERVERDEBUG | č — č 


P Fie Line | Description 

-| A linkbox-test.html 63 Warning: Empty tag: <LI> 

G@)) Æ linkbox-test.html 7 Warning: Empty document title 
E| & Master_2-column-homep... 45 Warning: Missing "alt" attribute 
& Master 2-column-homep... 63 Warning: Empty tag: <LI> 


Complete. 


Figure 35 - Errors Report 


NOTE: The web template files have generic text in their titles and may not show up in the site report as 
untitled documents. 


To fix the errors: 

1. In the Results panel, under the File column, double-click the file with the missing page 
title, alt attribute, or removable empty tags. The document opens in Split view and the 
code with errors is highlighted. 

2. To fix a missing title, enter a page title in the Title box of the Document toolbar (see 
Figure 26). 

3. To fix a missing alt attribute, enter an image description in the Alt box of the Properties 
panel (see Figure 36). 

4. To fix empty tags, delete the start and end tags in Code view. 
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BO Edt 4 


Figure 36 - Alt Attribute Box 


Checking Links 

Broken links can occur throughout the duration of the web development process. They are often 
the result of forgetting to update links, renaming files outside of the Dreamweaver program, or 
linking to non-existent sites. 


NOTE: When running the link checker, the files in the templates folder may show up with broken links. 
Any unused template files do not need to be fixed, but any template file that will be used to create more 
pages should be updated. 


To check for broken links: 
1. Click the Window menu, point to Results, and then click Link Checker. The Link 
Checker tab of the Results panel displays. 
2. Click the Check Links button [P9 located in the upper-left corner of the Results panel 
and select Check Links For Entire Current Local Site. The errors are listed in the 
Results panel (see Figure 37). 


LINK CHECKER 


Show: (links to files not found on local disk) 


By | Files & | Broken Links | 


L1 lc? /linkbox-test.html [index.html 
To) /Master_2-column-homepage.html #mainContent 

- [Master 2-column-homepage.html [index.html 
TO /templates/1-column-layout-no-horiz-menu.html #mainContent 
To) /templates/1-column-layout.html #mainContent 
14 Total, 14 HTML, 0 Orphaned 1400 All links, 1164 OK, 14 Broken, 222 External 
Figure 37 - Broken Links Report 


3. Inthe Results panel, under the Files column, double-click a file with broken links to 
open the page. The code with errors is highlighted. 

4. Inthe Properties panel, click the HTML button. 

5. Change the link location in the Link box (see Figure 38). 


NOTE: Links can also be fixed directly from the Link Checker by clicking the link location 
under the Broken Links column. 


PROPERTIES 


| <> HTML | Format None v Class B7 FE 
ges [wx a] uk 


Page Properties... 


Figure 38 - HTML Properties 


The Link Checker can also check for External Links and Orphaned Files. An External Link is 
any link that points to a website that is outside the scope of the defined page. It is good to double 
check external links on occasion to make sure they have not moved or been taken down by the 
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owner. Orphaned Files are web pages within the site definition that do not have any links 
pointing to them. Orphaned Files are essentially files that are not being used, and as such, should 
not be uploaded to a web server. 


CSULA Accessibility Resources 
Web authors have many accessibility resources for getting help. The CSULA Web Accessibility 


Guidelines website located at http://www.calstatela.edu/accessibility provides information about 
the Section 508 guidelines, testing tools, and other resources. For tutorials on web accessibility, 
visit http://www.calstatela.edu/accessibility/tutorials.php. Before publishing pages, web authors 
should visit http://www.calstatela.edu/accessibility/tools.php to find free programs and web 
resources for testing the accessibility of their website. To help identify potential problems that 
automated programs are not able to catch, visit the Manual Evaluation Checklist page located at 
http://www.calstatela.edu/accessibility/manual.php. 


Getting Help 


This section of the handout provides additional training resources on web accessibility as well as 
how to get in-person assistance. It also includes helpful links and information on web 
accessibility, HTML and Dreamweaver CS5.5. 


Other Training Resources on Web Accessibility 


There are Moodle courses on web accessibility specifically developed for CSULA users and web 
authors. Visit https://moodle.calstatela.edu and log in with your myCSULA Identity account. 
These courses are listed under Miscellaneous or can be found by searching for ITS Training Web 
Accessibility. 
e HiSoftware Compliance Sheriff 
http://www.calstatela.edu/its/training/pdf/compliancesheriff.pdf 


e Web Accessibility Awareness 
http://www.calstatela.edu/its/training/pdf/webaccessibility.pdf 


e Web Accessibility Manual Checks 
http://www.calstatela.edu/its/training/pdf/webaccessibilitymc.pdf 


lynda.com also provides video tutorials on web accessibility. Use your myCSULA Identity 
account to log in at https://lynda.calstatela.edu and search for Web Accessibility Principles. 


In-person Support 
Below is a list of the Cal State L.A. support groups that can provide in-person assistance with 
web accessibility issues. 
e ITS Help Desk: http://www.calstatela.edu/helpdesk 
Location: Library Palmer Wing Lobby 
Phone: 323-343-6170 
E-mail: helpdesk@calstatela.edu 
e Center for Effective Teaching and Learning (CETL): http://www.calstatela.edu/cetl 
Location: Fine Arts 138 
Phone: 323-343-6594 
E-mail: CETL@calstatela.edu 


e Information Technology Consultants (ITCs): http://www.calstatela.edu/itc 
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Accessibility Help 


Below is a list of helpful links on web accessibility standards, awareness and tools. 


Web Accessibility Laws and Standards 

e Section 508 (http://www.section508.gov): The official Section 508 information website. 

e World Wide Web Consortium (W3C): An international consortium where members, 
full-time staff, and the public work together to develop web standards. Their mission is to 
lead the World Wide Web to its full potential by developing protocols and guidelines that 
ensure long-term growth for the web. W3C establishes its own set of Web Content 
Accessibility Guidelines (WCAG) containing additional measures for making pages more 
universally accessible. Web authors and developers are encouraged to also comply with 
the W3C guidelines. 

= W3C (http://www.w3.org) 


= WCAG (http://www.w3.0org/TR/WAI-WEBCONTENT) 
= Web Accessibility Initiative (WAT) (http://www.w3.org/WAI/) 


Web Accessibility Awareness 

e CSU ATI (http://www.calstate.edu/accessibility): A website that provides online tutorials 
for creating accessible content, a list of sister campus ATI websites, and ATI newsletters. 

e CSULA ATI (http://www.calstatela.edu/accessibility/ati): A website that provides 
information on the progress of the ATI project at CSULA, outlining the responsibilities 
of the three working groups. 

e WebAim (http://webaim.org/intro/): A website that provides extensive information on 
creating accessible content for web delivery, print and video/audio. 


Web Accessibility Testing Tools 
e CSULA web accessibility tools (http://www.calstatela.edu/accessibility/tools.php): A 
list of tools and websites recommended by CSULA for testing websites for accessibility. 
e CSULA web accessibility tutorials 
(http://www.calstatela.edu/accessibility/tutorials.php): A list of tutorials for developing 
accessible web content. 
e Manual testing tools: 
= CSULA manual evaluation checklist 
(http://www.calstatela.edu/accessibility/manual.php): A simple online form that is 
designed to complement automated evaluation tools for website accessibility with 
an emphasis on areas that can only be evaluated realistically by human judgment. 
This checklist is based on Tom Jewett's manual accessibility evaluation and is 
edited to follow CSULA requirements. 
= Manual accessibility evaluation by Tom Jewett 
(http://www.tomjewett.com/accessibility/evaluation.html) 
= Web accessibility testing by Jim Thatcher 
(http://www.jimthatcher.com/testing.htm) 
e Accessibility toolbars: 
= Web Accessibility toolbar 
(http://www. visionaustralia.org.au/info.aspx?page=614%20): Free accessibility 


toolbar for Internet Explorer. 
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= Firefox Web Developer toolbar 


(http://addons.mozilla.org/en-US/firefox/addon/web-developer/): Free 
accessibility toolbar for Mozilla Firefox. 


e Screen readers: Free screen readers for download. 
= NonVisual Desktop Access for Windows (http://www.nvda-project.org/) 
= Fire Vox for Firefox (http://www.firevox.clcworld.net/) 

e W3C's complete list of web accessibility evaluation tools 


(http://www.w3.org/W AI/RC/tools/complete) 


HTML Help 


Some web authors may find it beneficial to learn the code used to create web pages. There are 
many tutorials on the web that can be used to learn HTML. A good place to start is with the 
organization that standardized the HTML language, the World Wide Web Consortium (W3C). 

e W3C HTML (http://www.w3.org/html/) 

e w3schools.com (http://www.w3schools.com/) 

e Step-by-step HTML handouts (http://www.calstatela.edu/handouts#H) 


Dreamweaver CS5.5 Help 


Complete product help is available on the Dreamweaver Help website 
(http://helpx.adobe.com/dreamweaver.html). Users can also access help topics by using the Help 
menu or the search box within the program. 


To access Dreamweaver CS5.5 help: 

1. Start Dreamweaver CS5.5. 

2. Click the Help menu, and then click Dreamweaver Help (see Figure 39). Or, type a 
search term in the search box located on the right side of the Application bar, and then 
press the Enter key (see Figure 40). The Adobe Community Help window opens 
displaying help topics. 


El my OG» Be 
| Dreamweaver Help Fl 
| Spry Framework Help ` 

Get started with Business Catalyst InContext Editing 

Omniture 

ColdFusion Help Ctri- Fl 
Reference Shift+F1 


Dreamweaver Support Center 


Dreamweaver Exchange 


Manage Extensions... 


| CSS Advisor 


Adobe Online Forums 


Product Registration... 
Deactivate... 
Updates... 


Adobe Product Improvement Program... 


About Dreamweaver 


Figure 39 - Dreamweaver CS5.5 Help Menu 


o ) 


Figure 40 - Dreamweaver CS5.5 Search Box 
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Useful Dreamweaver Shortcuts 
Table 6 lists the most commonly used shortcuts in Dreamweaver CS5.5. 


Table 6 - Shortcuts in Dreamweaver CS5.5 


Shortcut Description 

Ctrl+N New document 

Ctrl+S Save document 

Ctrl- Alt-T Insert image 

Ctrl+F Find and replace 

Ctrl+J Page properties 

Shift+F7 Check spelling 

Shift+Enter Line break 

F8 Show/Hide the Files panel 

Ctrl+F2 Show/Hide the Insert panel 

Ctrl+F3 Show/Hide the Properties panel 
Shift+F10 Show/Hide the History panel 

F10 Show/Hide the Code Inspector panel 
Shift+F4 Show/Hide the Behaviors panel 

F12 Preview in primary browser 
Ctrl+F12 Preview in secondary browser 
Double-click Select a word 

Triple-click Select all content within container (div, paragraph, list item, etc.) 


Creating Accessible Websites Using Dreamweaver CS5.5 and CSULA Web Templates 


36 


